<include file="public@header">
<style>
    .hz_all{
        width: 100%;
        padding: 0.5rem 0.4rem;
    }
    .hz_head{
        width: calc(100% - 0.7rem);
        height: 2.4rem;
        border-radius: 0.12rem;
        background: #29313e;
        display: flex;
        align-items: center;
        margin: 0 0.35rem;
        border: 1px solid #9b8134;
    }
    .hz_head>img{
        width: 0.8rem;
        height: 0.9rem;
        margin-left: 0.25rem;
        margin-right: 0.35rem;
    }
    .hz_inf{
        width: 5.6rem;
        height: 2.4rem;
    }
    .hz_inf p{
        width: 100%;
        height: 1.2rem;
        border-bottom: 0.01rem solid #727a87;
        box-sizing: border-box;
        font-size: 0.28rem;
        color: #cccccc;
        line-height: 1.2rem;
    }
    .hz_inf p:last-child{
        border: 0;
    }
    .hz_inf p span{
        color: #fff;
        font-weight: bold;
        margin-left: 0.3rem;
    }
    .hz_bz{
        padding: 0.1rem 0.35rem;
    }
    .hz_bz>p:nth-child(1){
        line-height: 0.6rem;
        font-size: 0.28rem;
        font-weight: bold;
        margin-top: 0.4rem;
        color: #fff;
    }
    .hz_num{
        width: 100%;
        height: 0.8rem;
        border-bottom: 0.01rem solid #858d9a;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }
    .hz_num input{
        background: transparent;
        height: 0.78rem;
        width: 3.8rem;
        line-height: 0.78rem;
        border:0;
        font-size: 0.28rem;
        color: #868e9b;
    }
    .hz_num p{
        margin-left: auto;
        font-size: 0.28rem;
        color: #868e9b;
    }
    .hz_num p span{
        color: #fff;
    }
    .hz_note{
        font-size: 0.24rem;
        line-height: 0.7rem;
        color: #858d9a;
    }
    .hz_btn{
        margin: 0.5rem 0;
        width: 80%;
        margin-left: 10%;
        height: 0.6rem;
        border-radius: 0.1rem;
        font-size: 0.3rem;
        background: #edbe3a;
        color: #000;
        border:0;
        font-weight: bold;
        outline: none;
    }
</style>
<body>
    <div class="bgbg headhead">
        <h3 class="mytitle">{:lang('Transfer')}</h3>
        <div class="hz_all">
           <div class="zz_div3">
            <div class="hz_head">
                <img src="__STATIC__/hybit/images/huazhuan.png" onclick="changespan(this)" alt="">
                <div class="hz_inf">
                    <p>{:lang('Form')}<span class="hz_span1">{:lang('Non Margin Account')}</span></p>
                    <p>{:lang('To')}<span class="hz_span2">{:lang('Margin Account')}</span></p>
                </div>
            </div>
            <div class="hz_bz">
                <p>{:lang('Coin')}<br>USDT</p>
            </div>
            <div class="hz_bz">
                <p>{:lang('Num')}</p>
                <div class="hz_num">
                    <input type="text" id="hz_num" placeholder="{:lang('Num')}">
                    <p>USDT&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<span onclick="hz_all(this)">{:lang('All')}</span></p>
                </div>
                <p class="hz_note">{:lang('Available')}：  <span id="hz_allnum">-</span> USDT</p>
            </div>
            <button class="hz_btn">{:lang('Not yet open')}</button>
            </div>
        </div>
    </div>
    
    <script src="__STATIC__/hybit/js/jquery.min.js"></script>
    <script>
        function hz_all(argument) {
            let hz_allnum = $('#hz_allnum').html();
            $('#hz_num').val(hz_allnum) 
        }

        function changespan(){
            let hz_span1 = $('.hz_span1').html()
            let hz_span2 = $('.hz_span2').html()
            $('.hz_span1').html(hz_span2)
            $('.hz_span2').html(hz_span1)
        }
    </script>
</body>
</html>